<template>
	<div>
		<el-menu class="el-menu-demo" mode="horizontal">
			<el-menu-item index="1" @click="menu">菜单</el-menu-item>
			<el-menu-item index="2" @click="none">云数据</el-menu-item>
			<el-menu-item index="3" @click="showCont">admin</el-menu-item>
			<div style="z-index: 9;position: absolute;
    top: 100%;color: black;right: 0;width: 33%;" v-if="show">
				<div class="list">登录/注册</div>
				<div class="list">查看资料</div>
				<div class="list">退出</div>
			</div>
		</el-menu>
		<!-- 左侧导航栏         -->
		<el-row v-if="showt">
			<el-col :span="12">
				<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64"
				 text-color="#fff" active-text-color="#ffd04b">

					<el-menu-item index="1">
						<i class="el-icon-location"></i>
						<span slot="title">导航一</span>
					</el-menu-item>

					<el-menu-item index="2">
						<i class="el-icon-menu"></i>
						<span slot="title">导航二</span>
					</el-menu-item>
					<el-menu-item index="3">
						<i class="el-icon-setting"></i>
						<span slot="title">导航三</span>
					</el-menu-item>
				</el-menu>
			</el-col>
		</el-row>


	</div>
</template>

<script>
	import Vue from 'vue';
export default {
	data() {
		return {
			show: false,
			showt: false
		};
	},
	methods: {

		showCont: function() {

			this.show = !this.show;
			this.showt = false;
		},
		none: function() {

			this.show = false;
			this.showt = false;
		},
		menu: function() {

			this.show = false;
			this.showt = !this.showt;

		},
		handleOpen(key, keyPath) {
			console.log(key, keyPath);
		},
		handleClose(key, keyPath) {
			console.log(key, keyPath);
		}

	},
	created() {
    // 点击其他不在的区域触发事件,点击全局空白地方子模块消失
    document.addEventListener('click', (e) => {
      console.log(this.$el.contains(e.target));
      if (!this.$el.contains(e.target)){
          this.show = false; 
          this.showt = false; 
      }
    })
  }
	
	
}

</script>

<style scoped>
	.el-menu-item,#el-menu-item {
		width: 33%;
		color: white;
	}
	
	.el-menu {
		background-color: #409EFF;
	}
	
	.el-menu--horizontal>.el-menu-item.is-active {
		border: 0;
		width: 34%;
		background-color: #409EFF;
	}
	
	.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover {
		background-color: #409EFF;
	}
	
	.list {
		display: block;
		background-color: #409EFF;
		color: white;
		width: 100%;
		height: 30px;
		line-height: 30px;
	}
	
	.el-row {
		position: absolute;
		z-index: 9;
		width: 100%;
	}
	.el-menu--horizontal>.el-menu-item {
		color: white !important;
	}
	.el-menu--horizontal>.el-menu-item.is-active {
		color: black !important;
	}
</style>
